<footer class="p-6" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container grid grid-cols-2 mx-auto gap-x-3 gap-y-8 sm:grid-cols-3 md:grid-cols-4">
		<div class="flex flex-col space-y-4">
			<h2 class="font-medium">Getting started</h2>
			<div class="flex flex-col space-y-2 text-sm" [ngClass]="['text' + plainInv]">
				<a rel="noopener noreferrer" href="#" class="">Installation</a>
				<a rel="noopener noreferrer" href="#" class="">Release Notes</a>
				<a rel="noopener noreferrer" href="#" class="">Upgrade Guide</a>
				<a rel="noopener noreferrer" href="#" class="">Using with Preprocessors</a>
				<a rel="noopener noreferrer" href="#" class="">Optimizing for Production</a>
				<a rel="noopener noreferrer" href="#" class="">Browser Support</a>
				<a rel="noopener noreferrer" href="#" class="">IntelliSense</a>
			</div>
		</div>
		<div class="flex flex-col space-y-4">
			<h2 class="font-medium">Core Concepts</h2>
			<div class="flex flex-col space-y-2 text-sm" [ngClass]="['text' + plainInv]">
				<a rel="noopener noreferrer" href="#" class="">Utility-First</a>
				<a rel="noopener noreferrer" href="#" class="">Responsive Design</a>
				<a rel="noopener noreferrer" href="#" class="">Hover, Focus, & Other States</a>
				<a rel="noopener noreferrer" href="#" class="">Dark Mode</a>
				<a rel="noopener noreferrer" href="#" class="">Adding Base Styles</a>
				<a rel="noopener noreferrer" href="#" class="">Extracting Components</a>
				<a rel="noopener noreferrer" href="#" class="">Adding New Utilities</a>
			</div>
		</div>
		<div class="flex flex-col space-y-4">
			<h2 class="font-medium">Customization</h2>
			<div class="flex flex-col space-y-2 text-sm" [ngClass]="['text' + plainInv]">
				<a rel="noopener noreferrer" href="#" class="">Configuration</a>
				<a rel="noopener noreferrer" href="#" class="">Theme Configuration</a>
				<a rel="noopener noreferrer" href="#" class="">Breakpoints</a>
				<a rel="noopener noreferrer" href="#" class="">Customizing Colors</a>
				<a rel="noopener noreferrer" href="#" class="">Customizing Spacing</a>
				<a rel="noopener noreferrer" href="#" class="">Configuring Variants</a>
				<a rel="noopener noreferrer" href="#" class="">Plugins</a>
			</div>
		</div>
		<div class="flex flex-col space-y-4">
			<h2 class="font-medium">Community</h2>
			<div class="flex flex-col space-y-2 text-sm" [ngClass]="['text' + plainInv]">
				<a rel="noopener noreferrer" href="#" class="">GitHub</a>
				<a rel="noopener noreferrer" href="#" class="">Discord</a>
				<a rel="noopener noreferrer" href="#" class="">Twitter</a>
				<a rel="noopener noreferrer" href="#" class="">YouTube</a>
			</div>
		</div>
	</div>
	<div class="flex items-center justify-center px-6 pt-12 text-sm">
		<span class="" [ngClass]="['text' + plainInv]">© Copyright 1986. All Rights Reserved.</span>
	</div>
</footer>
